<template>
	<view class="session-wrap">
		<view class="date-tab">
			<view :class="currentIndex===index?'active-date':''" v-for="(item,index) in haveSessionList" :key="index"
				@click="changeTab(index)">
				<text>{{getWeek(item)}}</text>
				<text>{{getDate(item)}}</text>
				<text :class="currentIndex===index?'bottom':''"></text>
			</view>
		</view>
		<view v-if="currentFilmSessionList.length">
			<view class="session-list" v-for="(item,index) in currentFilmSessionList" @click="selectSeat(item)"
				:key="index">
				<view style="display: flex;">
					<image class="time-icon" :src="getTimeIcon(item.StartTime)" mode=""></image>
					<view class="film-date session-info" style="width: 15vw;">
						<text style="font-weight: bold;">{{getTime(item.StartTime)}}</text>
						<text>{{getTime(item.EndTime)}}散场</text>
					</view>
					<view class="film-screen session-info" style="width: 32vw;">
						<text style="font-weight: bold;">{{item.Language}} {{item.ShowType}}</text>
						<text style="text-align: center;">{{getName(item.ScreenCode)}}</text>
					</view>
				</view>
				<view style="display: flex;">
					<view class="film-price session-info" style="align-items: center;width: 30vw;
					">
						<view style="font-weight: bold;">
							<view class="source-price">￥{{item.StandardPrice }}</view>
							<!-- <text class="price">￥{{getChannelPrice(item)}}</text><text>起</text> -->
						</view>
						<view class="card-price">
							<text class="title">会员卡</text><text
								style="color: #efa240;padding: 0 5rpx;">￥{{item.memberPrice?item.memberPrice:item.LowestPrice}}起</text>
						</view>
					</view>
					<view class="buy-btn">
						<!-- <u-button plain hairline :customStyle="{width:'120rpx;',height:'58rpx'}" shape="circle" round color="#fb5868">购票
						</u-button> -->
						购票
					</view>
				</view>

			</view>
		</view>
		<view v-else>
			<view style="width: 100vw;display: flex;justify-content: center;margin-top: 80rpx;">
				<text style="color: #999;font-size: 26rpx;">今日暂无排片</text>
			</view>
			<view v-if="haveSessionList.length > 1"
				style="width: 100vw;display: flex;justify-content: center;margin-top: 40rpx;">

				<button type="default" class="tomorrowBtn" @click="seeTomorrow">点击查看{{tomorrowBtn}}场次</button>
				<!-- getDate(haveSessionList[1]) -->
			</view>

		</view>
	</view>
</template>

<script>
	import {
		querySession,
		queryNewSession,
		querySessionStatus
	} from '../../common/http/api'
	import moment from 'moment'
	export default {
		data() {
			return {
				dateList: [],
				currentIndex: 0,
				sessionList: [],
				filmCode: '',
				currentFilmSessionList: [],
				haveSessionList: [],
				filmObj: {},
				films: [],
				fullList: []
			}
		},
		methods: {
			//获取排期
			querySession() {
				queryNewSession().then(res => {

					const {
						data,
						code,
						msg
					} = res
					if (code === "SUCCESS") {
						const list = []
						for (let key in data) {
							this.dateList.push(key)
							list.push(...data[key])
						}
						this.dateList.sort((a, b) => {
							return this.sessionSort(a) - this.sessionSort(b)
						})
						const currentTime = moment().diff()

						this.sessionList = list.filter(item => {
							const startTime = moment(item.NetSaleStopTime).diff()

							return item.NetSaleStopTime && currentTime < startTime
						})
						this.sortFilm(data[this.dateList[0]], this.dateList[0])
						this.filterSession(this.dateList[0])
						this.filterDateList()
					}
				})
			},
			//点击切换
			changeTab(index) {
				this.currentIndex = index
				this.filterSession(this.haveSessionList[index])
			},
			seeTomorrow() {
				this.currentIndex += 1
				this.filterSession(this.haveSessionList[this.currentIndex])
			},
			//查询电影排期
			filterSession(date) {
				const sessionList = this.sessionList.filter(item => {
					const name = this.filmObj.FilmName
					const code = this.filmCode
					return item.FilmCode.includes(code.substring(code.length - 8)) && item.filmName.includes(name
						.substring(0, 2))
				})

				this.currentFilmSessionList = sessionList.filter(item => {
					const startTime = moment(item.NetSaleStopTime).diff()
					const currentTime = moment().diff()
					return currentTime < startTime && date === item.StartTime.slice(0, 10)
				})
				this.currentFilmSessionList.sort((a, b) => {
					return this.sessionSort(a.StartTime) - this.sessionSort(b.StartTime)
				})

			},
			filterDateList() {
				//置空防止额外push
				this.haveSessionList = []
				let filmDateList = []
				const currentDate = moment().format('YYYY-MM-DD')
				//查找当前影片
				const sessionList = this.sessionList.filter(item => {

					return item.FilmCode.includes(this.filmCode.substring(this.filmCode.length - 8))
				})
				// const after = moment(sessionList.length && sessionList[0].StartTime.slice(0, 10)).valueOf()
				const currentTime = moment().valueOf()
				if (sessionList.length === 0) {
					this.haveSessionList.push(currentDate)
					return
				}
				//获取拍片日期
				for (let i = 0; i < sessionList.length; i++) {
					const filmDate = sessionList[i].StartTime.slice(0, 10)
					filmDateList.push(filmDate)
				}
				console.log(filmDateList);
				//去重
				const setList = new Set(filmDateList)

				let newList = []
				this.dateList.map(item => {
					if (setList.has(item)) {
						newList.push(item)
					}
				})


				if (currentDate.indexOf(newList) === -1) {
					newList.unshift(currentDate)
				}

				const setNewList = new Set(newList)
				console.log(this.dateList);
				this.dateList.map(item => {
					if (setNewList.has(item)) {
						this.haveSessionList.push(item)
					}
				})

				this.haveSessionList.sort((a, b) => {
					return this.sessionSort(a) - this.sessionSort(b)
				})

			},
			//排序
			sortFilm(list, date) {

				const _list = list.filter(item => {
					const startTime = moment(item.NetSaleStopTime).valueOf()
					const currentTime = moment().valueOf()
					return item.NetSaleStopTime && currentTime < startTime
				})
				//即将上映
				const futureFilm = []
				this.films.map(item => {
					const futureFilmIndex = futureFilm.findIndex(filmItem => item.PublishDate == filmItem.date)
					if (moment(item.PublishDate).diff() > moment().diff()) {
						futureFilm.push(item)
					}

					item.sessions = []
					item.allSessions = []
					this.sessionList.map(session => {
						const code = session.FilmCode
						const name = session.filmName
						if (item.FilmCode.includes(code.substring(code.length - 9))) {
							if (item.FilmName.includes(name.substring(0, 2))) {
								item.allSessions.push(session)
							}
						}
					})
					_list.map(session => {

						const code = session.FilmCode
						const name = session.filmName
						if (item.FilmCode.includes(code.substring(code.length - 9))) {
							if (item.FilmName.includes(name.substring(0, 2))) {
								item.sessions.push(session)
							}
						}
					})
				})
				console.log(this.films);
				this.$emit('getFutureFilm', futureFilm)


				this.films.sort(function(a, b) {
					return b.sessions.length - a.sessions.length
				})
				// if (this.films[0].sessions.length <= 1) this.films.reverse()
				const filmsList = this.films.filter(item => item.allSessions.length > 0)


				uni.$emit('sortList', filmsList)
			},
			//选择场次
			selectSeat(session) {

				const filmData = {
					filmName: session.filmName,
					filmCode: session.FilmCode,
					ScreenName: this.getName(session.ScreenCode),
					Imageurl: this.filmObj.Imageurl,
					week: this.getWeek(session.StartTime),
					start: this.getTime(session.StartTime),
					end: this.getTime(session.EndTime),
					date: this.getDate(session.StartTime),
					ScreenCode: session.ScreenCode,
					PlanCode: session.PlanCode,
					StartTime: session.StartTime,
					EndTime: session.EndTime,
					ShowType: session.ShowType,
					payPrice: session.LowestPrice,
					price: session.LowestPrice,
					memberPrice: session.memberPrice,
					LowestPrice: session.LowestPrice,
					channelFee: session.subFee ? session.subFee : 0,
					couponPrice: session.LowestPrice
				}

				this.$store.commit('setSessionStore', filmData)

				uni.navigateTo({
					url: '/pages/seats/seats'

				})


			},
			sessionSort(date) {
				const timeStamp = moment(date).valueOf();
				return timeStamp
			}
		},
		mounted() {
			uni.$once('firstFilmCode', filmList => {
				if (!filmList) {
					uni.hideLoading()
					return
				}
				this.filmCode = filmList[0].FilmCode
				this.filmObj = filmList[0]
				this.films = filmList
				this.filterDateList()
				this.filterSession()
				this.querySession()


			})
			uni.$on('changeFilmCode', film => {
				this.filmCode = film.FilmCode
				this.filmObj = film
				this.currentIndex = 0
				if (this.dateList.indexOf(this.getCurrentTime) === -1) {
					this.dateList.unshift(this.getCurrentTime)
				}
				this.filterSession(this.dateList[0])
				this.filterDateList()
			})
		},

		computed: {
			getTimeIcon() {
				return time => {
					const date = moment(time).format('YYYY-MM-DD')
					const isDay = moment(time).isBetween(`${date} 05:59:59`, `${date} 18:00:00`)
					return isDay ? '../../static/image/day.png' : '../../static/image/night.png'
				}
			},
			//获取渠道价
			getChannelPrice() {
				return item => {
					const channelPrice = item.channelPrice ? parseFloat(item.channelPrice) : parseFloat(item
						.WxPayPrice)
					const fee = item.subFee ? parseFloat(item.subFee) : 0
					return (channelPrice + fee).toFixed(2)
				}
			},
			//tab日期
			getDate() {
				return date => {
					const mouth = date && date.slice(5, 7)
					const day = date && date.slice(8, 10)
					return `${mouth}月${day}日`
				}
			},
			//tab日期
			getWeek() {
				return date => {
					//今天
					const nowDate = new Date();
					const month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1) : nowDate.getMonth() +
						1;
					const today = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
					const currentDate = month + '-' + today
					//传入时间
					const mydate = new Date(date);
					const day = mydate.getDay();
					const weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
					return currentDate == date.slice(5, 10) ? '今天' : weekday[day]
				}
			},
			getTime() {
				return date => {
					return date.slice(11, 16)
				}
			},
			getName() {
				return code => {
					const {
						screens
					} = this.$store.state
					const index = screens.find(item => item.ScreenCode === code)
					return index ? index.ScreenName : ''
				}
			},
			getCurrentTime() {
				const nowDate = new Date();
				const year = nowDate.getFullYear()
				const month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1;
				const today = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
				const currentDate = year + '-' + month + '-' + today

				return currentDate
			},
			tomorrowBtn() {
				const tomorrowDate = new Date(this.haveSessionList[1]).getTime()
				const currentDate = new Date(this.haveSessionList[0]).getTime()
				const seconds = (tomorrowDate - currentDate) / 1000
				return seconds == 86400 ? '次日' : this.getDate(this.haveSessionList[1])
			}

		}
	}
</script>

<style lang="scss">
	.session-wrap {
		background-color: #fff;
	}

	.tomorrowBtn {
		background-color: #fff;
		border: 1px solid royalblue;
		color: royalblue;
		font-size: 28rpx;
		width: 400rpx;
		height: 80rpx;
	}

	.buy-btn {
		width: 120rpx;
		line-height: 60rpx;
		background-color: #fff;
		border: #fa5869 2px solid;
		text-align: center;
		border-radius: 40rpx;
		font-size: 28rpx;
		color: #fa5869;
		margin-left: -20rpx;
	}

	.date-tab {
		display: flex;
		font-size: 26rpx;
		border-bottom: 1px solid #f0f0f5;
		width: 100vw;
		overflow-x: scroll;

		view {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #999;

			text {
				width: 150rpx;
				text-align: center;

			}
		}

		&::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
			color: transparent;
		}

		.bottom {
			width: 44rpx;
			height: 3px;
			background-color: royalblue;
			border-radius: 20rpx;

		}

		.active-date {
			color: black;
		}
	}

	.session-list {
		display: flex;
		padding: 10rpx 15rpx;
		border-bottom: 1px solid #f0f0f5;
		justify-content: space-between;
		align-items: center;
		height: 70px;
		position: relative;

		.time-icon {
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			top: 10rpx;
			left: 110rpx;
		}

		.session-info {
			display: flex;
			flex-direction: column;

			align-items: center;
			font-size: 32rpx;

		}

		.film-date {
			width: 18vw;
			display: flex;
			flex-direction: column;
			justify-content: center;

			text {
				font-size: 24rpx;
				color: #999;
				line-height: 40rpx;
			}

			text:first-child {
				font-size: 28rpx;
				color: black;
			}

		}

		.film-screen {
			width: 23vw;
			align-items: unset;

			text {
				font-size: 22rpx;
				color: #999;
				line-height: 40rpx;
				margin-left: 25rpx;
			}

			text:first-child {
				font-size: 28rpx;
				color: black;
				text-align: center;
			}
		}

		.film-price {
			width: 25vw;
			font-size: 22rpx;
			margin-right: 30rpx;
			text-align: justify;

			view {
				display: flex;
				width: 90%;
				flex-direction: row;
				text-align: right;
				justify-content: flex-end;

				text {
					display: inline-block;
					line-height: 40rpx;

				}

				.price {
					font-size: 28rpx;
					margin-right: 3rpx;
					letter-spacing: -2rpx;

				}

				.source-price {
					font-size: 28rpx;
					color: #999;
					color: #fa5869;
					// text-decoration: line-through;
					display: flex;
					justify-content: center;
				}

			}

			view:first-child {
				color: #fa5869;
			}

			view:last-child {
				color: red;
				font-size: 22rpx;
			}
		}

		.card-price {
			border: 1px solid #efa240;
			display: flex;
			align-items: center !important;
			justify-content: center !important;
			font-size: 26rpx;
			border-radius: 10rpx;
			width: unset !important;


			.title {
				background-color: #efa240;
				color: #fff;
				padding: 0 10rpx;
			}

			text {
				line-height: 30rpx !important;
			}
		}
	}
</style>